<template>
    <div class="container-box">
        <div class="one" v-for="(item,index) in dataLog" :key="index">
            <div class="left">
                <span class="iconfont quan">&#xe566;</span>
                <span class="xian"></span>
            </div>
            <div class="right" >
                <span>{{ item.operationContent }}</span>
                <span>{{ item.operationTime }}</span>
            </div>
        </div>
        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>
    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, reactive, toRefs,onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/util/http'
export default defineComponent({
    name: 'DetailDataLog',
    setup() {
        const router = useRouter();
        const route = useRoute()

        const state = reactive({
            dataLog:[] as any
        })

        // 返回
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        onBeforeMount(()=>{
            // 当前id
            let id = route.query.id

            axios({
                method:'get',
                url:'cryptographer/dataLog',
                params:{
                    id:id
                }
            })
            .then(res=>{
                console.log('数据日志');
                console.log(res);
                if(res.data.msg == '查询成功'){
                    state.dataLog = res.data.data
                }
            })
        })


        return {
            ...toRefs(state),
            exit
        }
    }
})
</script>
  
<style scoped lang="less">
.container-box {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 20px;
    background-color: white;
    position: relative;

    .one {
        width: 100%;
        display: flex;

        .left {
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 图标
            .iconfont {
                font-size: 25px;
            }

            .quan {
                color: #939393;
                height: 25%;
            }

            .xian {
                border: 1px solid #e5e5e5;
                height: 75%;
            }
        }

        .right {
            width: 45%;
            height: 60px;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;

            span {
                margin-bottom: 10px;
            }
        }
    }
}

.img {
    border-width: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 88px;
    height: 109px;
}

.text {
    color: white;
    position: absolute;
    top: 32px;
    right: -8px;
    transform: rotate(53deg);
}

/* 返回按钮 */
.exit {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button {
    width: 95px;
    height: 40px;
    font-size: 13px;
}
</style>